import React from 'react';
import { Form } from "antd";
import SelectResource from "components/SelectResource";
import { ToolType } from "components/Three/constants/ToolType";
import IToolModel from 'components/Three/interface/IToolModel';
import Controller from "Controller";

/** 工具（模型）设置面板 */
export default function Model() {

    const controller = Controller.instance;

    const threeController = controller.useMemo(s => s.threeController, []);

    const toolData = threeController.useMemo(s => s.toolData, []);

    const data = React.useMemo(() => toolData.get(ToolType.模型) as IToolModel | undefined, [toolData])

    const selectedTool = threeController.useMemo(s => s.selectedTool, []);

    if (selectedTool !== ToolType.模型) {
        return <></>;
    }

    return (
        <div>
            <Form
                layout="horizontal"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 20 }}
            >
                <Form.Item label='模型'>
                    <SelectResource
                        value={data?.file}
                        onChange={file => {
                            threeController.run(async s => {
                                s.toolData.set(ToolType.模型, { ...data, file });
                                s.toolData = new Map(s.toolData);
                            })
                        }}
                    />
                </Form.Item>
            </Form>
        </div>
    )
}